<template>
	<div>
		<el-dialog v-model="dialog" width="80%" title="商品选择器" center>
			<el-table v-loading="loading" :data="tableData" highlight-current-row @selection-change="handleCurrentChange" :max-height="maxHeight">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="spu" label="商品信息" width="300">
					<template #default="scope">
						<el-row>
							<el-col :span="6">
								<el-image
									style="width: 50px; height: 50px"
									:src="scope.row.spuUrls[0]"
									:preview-src-list="scope.row.spuUrls"
									fit="cover"
									:preview-teleported="true"
								></el-image>
							</el-col>
							<el-col :span="18" style="float: left">
								<span class="overflow-line-clamp-2">{{ scope.row.name }}</span>
							</el-col>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column prop="categoryName" label="商品类目" align="center" />
				<el-table-column prop="salesPrice" label="价格（元）">
					<template #default="scope">
						<div v-if="scope.row.lowPrice == scope.row.highPrice">
							销售价：
							<span style="color: red">{{ scope.row.lowPrice }}</span>
						</div>
						<div v-else>
							<div>
								最低价：
								<span style="color: red">{{ scope.row.lowPrice }}</span>
							</div>
							<div>
								最高价：
								<span style="color: red">{{ scope.row.highPrice }}</span>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="categoryName" label="规格" align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.enableSpecs == '0'" type="danger">单规格</el-tag>
						<el-tag v-if="scope.row.enableSpecs == '1'" type="success">多规格</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="商品状态">
					<template #default="scope">
						<el-tag v-if="scope.row.status == '0'" type="danger">已下架</el-tag>
						<el-tag v-if="scope.row.status == '1'" type="success">已上架</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" />
			</el-table>
			<!-- 分页 -->
			<pagination
				v-model:total="page.total"
				v-model:currentPage="page.currentPage"
				v-model:pageSize="page.pageSize"
				@changePage="initPage"
			></pagination>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="centerDialogVisible = false">关闭</el-button>
					<el-button type="primary" @click="onSubmit"> 确 认 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
import { getWarehousePage as getPage } from '/@/api/mall/goodsspu';
export default defineComponent({
	props: {
		limitNum: {
			type: Number,
			default: 1,
		},
	},
	setup(props, ctx) {
		const { proxy } = getCurrentInstance();
		const data = reactive({
			dialog: false,
			loading: false,
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 20, // 每页显示多少条
			},
			queryParams: {
				groupId: '',
			},
			tableData: [],
			currentList: [], // 选中的商品
			maxHeight: window.screen.availHeight - 500,
		});
		/**
		 * 素材分页列表
		 */
		const initPage = () => {
			data.loading = true;
			getPage({
				current: data.page.currentPage,
				size: data.page.pageSize,
			})
				.then((response) => {
					data.loading = false;
					data.tableData = response.data.data.records;
					data.page.total = response.data.data.total;
				})
				.catch(() => {
					data.loading = false;
				});
		};
		/**
		 * 选择商品
		 */
		const handleCurrentChange = (val) => {
			data.currentList = val;
		};
		const onSubmit = () => {
			if (data.currentList.length <= 0) {
				proxy.$message({
					message: '请选择商品',
					type: 'error',
				});
				return false;
			}
			if (data.currentList.length > props.limitNum) {
				proxy.$message({
					message: '最多只能选择【' + props.limitNum + '】件商品',
					type: 'error',
				});
				return false;
			}
			let message = '已选择 【' + data.currentList[0].name + '】等' + data.currentList.length + '件商品, 是否继续?';
			ElMessageBox.confirm(message, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				ctx.emit('currentRow', data.currentList);
				data.dialog = false;
			});
		};
		initPage();
		return {
			...toRefs(data),
			initPage,
			handleCurrentChange,
			onSubmit,
		};
	},
});
</script>
